<script setup>
import { computed, ref } from 'vue';

const age = ref(20)

// 写法1，调用 computed 方法 直接返回数据,必须掌握
const nextAge = computed(
    () => {
        return age.value + 1
    }
)

// 写法2，使用set/get钩子函数，一般应用在 既可以输入，也可以依赖其他数据，了解即可
const nextAge2 = computed(
    {
        get() { return age.value + 2 },
        set(val) { age.value = val - 2 }
    }
)
</script>
    
<template>
    <div>今年的年龄:<input v-model.number="age" /></div>
    <div>明年的年龄:{{nextAge}}</div>
    <div>后年的年龄:<input v-model.number="nextAge2" /></div>
</template>